<template>
  <view class="container">
    <view class="map-container">
      <map 
        id="map"
        class="map"
        :latitude="location.latitude"
        :longitude="location.longitude"
        :markers="markers"
        :polyline="routes"
        scale="17"
        show-location
      ></map>
      
      <view class="search-bar">
        <input 
          type="text" 
          v-model="searchKey" 
          placeholder="搜索地点、建筑、教室..."
          @focus="showSearchPanel = true"
        />
      </view>
      
      <view class="search-panel" v-if="showSearchPanel">
        <view class="panel-header">
          <text>搜索结果</text>
          <text class="close" @click="showSearchPanel = false">关闭</text>
        </view>
        <view class="result-list">
          <view class="result-item" v-for="(place, index) in searchResults" :key="index" @click="selectPlace(place)">
            <view class="info">
              <text class="name">{{place.name}}</text>
              <text class="address">{{place.address}}</text>
            </view>
            <text class="distance">{{place.distance}}米</text>
          </view>
        </view>
      </view>
      
      <view class="navigation-panel" v-if="selectedPlace">
        <view class="place-info">
          <view class="info">
            <text class="name">{{selectedPlace.name}}</text>
            <text class="address">{{selectedPlace.address}}</text>
          </view>
          <view class="actions">
            <button @click="startNavigation('normal')">开始导航</button>
            <button @click="startNavigation('ar')">AR导航</button>
          </view>
        </view>
        <view class="route-info" v-if="routeInfo">
          <view class="route-stats">
            <view class="stat-item">
              <text class="value">{{routeInfo.distance}}米</text>
              <text class="label">距离</text>
            </view>
            <view class="stat-item">
              <text class="value">{{routeInfo.duration}}分钟</text>
              <text class="label">步行时间</text>
            </view>
          </view>
          <view class="route-steps">
            <view class="step-item" v-for="(step, index) in routeInfo.steps" :key="index">
              <text class="instruction">{{step.instruction}}</text>
              <text class="distance">{{step.distance}}米</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="ar-view" v-if="showAR">
      <camera class="camera" device-position="back"></camera>
      <view class="ar-overlay">
        <view class="ar-marker" v-for="(marker, index) in arMarkers" :key="index" :style="marker.style">
          <text class="name">{{marker.name}}</text>
          <text class="distance">{{marker.distance}}米</text>
        </view>
        <view class="ar-compass">
          <text>{{compass}}°</text>
        </view>
        <button class="exit-ar" @click="exitAR">退出AR导航</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      location: {
        latitude: 30.123456,
        longitude: 120.123456
      },
      markers: [],
      routes: [],
      searchKey: '',
      showSearchPanel: false,
      searchResults: [
        {
          name: '图书馆',
          address: '校园中心区A栋',
          distance: 200,
          latitude: 30.123556,
          longitude: 120.123556
        },
        {
          name: '第一教学楼',
          address: '校园东区B栋',
          distance: 350,
          latitude: 30.123656,
          longitude: 120.123656
        }
      ],
      selectedPlace: null,
      routeInfo: null,
      showAR: false,
      arMarkers: [],
      compass: 0
    }
  },
  methods: {
    selectPlace(place) {
      this.selectedPlace = place
      this.showSearchPanel = false
      this.markers = [{
        id: 1,
        latitude: place.latitude,
        longitude: place.longitude,
        title: place.name,
        iconPath: '/static/icons/marker.png',
        width: 32,
        height: 32
      }]
      this.calculateRoute()
    },
    calculateRoute() {
      // TODO: 调用百度地图API计算路线
      this.routeInfo = {
        distance: 350,
        duration: 5,
        steps: [
          {
            instruction: '向东步行100米',
            distance: 100
          },
          {
            instruction: '右转步行200米',
            distance: 200
          },
          {
            instruction: '左转步行50米到达目的地',
            distance: 50
          }
        ]
      }
      this.routes = [{
        points: [
          {
            latitude: this.location.latitude,
            longitude: this.location.longitude
          },
          {
            latitude: this.selectedPlace.latitude,
            longitude: this.selectedPlace.longitude
          }
        ],
        color: '#1890ff',
        width: 4
      }]
    },
    startNavigation(mode) {
      if (mode === 'ar') {
        this.startARNavigation()
      } else {
        this.startNormalNavigation()
      }
    },
    startARNavigation() {
      this.showAR = true
      // TODO: 初始化AR导航
      this.initARMarkers()
      this.startCompassWatch()
    },
    startNormalNavigation() {
      // TODO: 开始普通导航
      uni.showToast({
        title: '导航开始',
        icon: 'success'
      })
    },
    initARMarkers() {
      // TODO: 根据实际位置计算AR标记位置
      this.arMarkers = [
        {
          name: '图书馆',
          distance: 200,
          style: 'transform: translate(100rpx, 200rpx)'
        },
        {
          name: '教学楼',
          distance: 350,
          style: 'transform: translate(300rpx, 150rpx)'
        }
      ]
    },
    startCompassWatch() {
      // TODO: 监听设备方向
      uni.onCompassChange((res) => {
        this.compass = res.direction.toFixed(0)
        this.updateARMarkers()
      })
    },
    updateARMarkers() {
      // TODO: 根据罗盘数据更新AR标记位置
    },
    exitAR() {
      this.showAR = false
      uni.stopCompass()
    }
  },
  onLoad() {
    // 获取当前位置
    uni.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.location = {
          latitude: res.latitude,
          longitude: res.longitude
        }
      }
    })
  }
}
</script>

<style lang="scss">
.container {
  height: 100vh;
  position: relative;
  
  .map-container {
    height: 100%;
    
    .map {
      width: 100%;
      height: 100%;
    }
    
    .search-bar {
      position: absolute;
      top: 40rpx;
      left: 30rpx;
      right: 30rpx;
      z-index: 100;
      
      input {
        width: 100%;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx;
        padding: 0 30rpx;
        font-size: 28rpx;
        box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
      }
    }
    
    .search-panel {
      position: absolute;
      top: 140rpx;
      left: 30rpx;
      right: 30rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
      z-index: 100;
      
      .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #F5F5F5;
        
        text {
          font-size: 28rpx;
          color: #333;
          
          &.close {
            color: #999;
          }
        }
      }
      
      .result-list {
        max-height: 600rpx;
        overflow-y: auto;
        
        .result-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;
          border-bottom: 1rpx solid #F5F5F5;
          
          &:last-child {
            border-bottom: none;
          }
          
          .info {
            flex: 1;
            
            .name {
              font-size: 28rpx;
              color: #333;
              margin-bottom: 6rpx;
              display: block;
            }
            
            .address {
              font-size: 24rpx;
              color: #999;
            }
          }
          
          .distance {
            font-size: 24rpx;
            color: #666;
          }
        }
      }
    }
    
    .navigation-panel {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 0 0;
      padding: 30rpx;
      
      .place-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        
        .info {
          flex: 1;
          
          .name {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
            display: block;
          }
          
          .address {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .actions {
          display: flex;
          gap: 20rpx;
          
          button {
            font-size: 24rpx;
            padding: 10rpx 30rpx;
            border-radius: 30rpx;
            
            &:first-child {
              background: #1890ff;
              color: #FFFFFF;
            }
            
            &:last-child {
              background: #f5f5f5;
              color: #666;
            }
          }
        }
      }
      
      .route-info {
        .route-stats {
          display: flex;
          margin-bottom: 30rpx;
          
          .stat-item {
            flex: 1;
            text-align: center;
            
            .value {
              font-size: 36rpx;
              font-weight: bold;
              color: #333;
              margin-bottom: 6rpx;
              display: block;
            }
            
            .label {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
        
        .route-steps {
          .step-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 0;
            border-bottom: 1rpx solid #F5F5F5;
            
            &:last-child {
              border-bottom: none;
            }
            
            .instruction {
              font-size: 28rpx;
              color: #333;
            }
            
            .distance {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }
    }
  }
  
  .ar-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    
    .camera {
      width: 100%;
      height: 100%;
    }
    
    .ar-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      
      .ar-marker {
        position: absolute;
        background: rgba(0,0,0,0.6);
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        
        .name {
          font-size: 24rpx;
          color: #FFFFFF;
          margin-bottom: 4rpx;
          display: block;
        }
        
        .distance {
          font-size: 20rpx;
          color: rgba(255,255,255,0.8);
        }
      }
      
      .ar-compass {
        position: absolute;
        top: 40rpx;
        right: 40rpx;
        background: rgba(0,0,0,0.6);
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        
        text {
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
      
      .exit-ar {
        position: absolute;
        bottom: 40rpx;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.6);
        color: #FFFFFF;
        font-size: 28rpx;
        padding: 20rpx 40rpx;
        border-radius: 40rpx;
      }
    }
  }
}
</style> 